<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="25%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!--      <el-tab-pane label="选择样例数据" name="first">-->
      <!--        <el-row>-->
      <!--          <el-col :span="6" style="border:solid 1px green">-->
      <!--            <div v-for="(item,index) in DatasetsName" :key="index" style="width:80%; margin:0 auto;">-->
      <!--              &lt;!&ndash;change函数返回一个参数选中的 Radio label 值 label值的绑定在下面el-radio 选项框中&ndash;&gt;-->
      <!--              <el-radio-group-->
      <!--                v-model="selectDatasets"-->
      <!--                size="medium"-->
      <!--                text-color="#409EFF"-->
      <!--                @change="selectChange"-->
      <!--              >-->
      <!--                &lt;!&ndash;v-model="selectDatasets"实现的绑定：-->
      <!--                1：如果我们在对应的标签内设置value eg：<el-radio value=""></el-radio> 那么实现的绑定便是value的值(可能不全适合)-->
      <!--                2：如果我们在对应的标签内不设置value，那么实现的绑定的值便是<el-radio>和</el-radio>中间的内容&ndash;&gt;-->
      <!--                <el-radio :label="DatasetsName[index]" border>{{ DatasetsName[index] }}</el-radio>-->
      <!--              </el-radio-group>-->
      <!--              <div style="height:10px" />-->
      <!--            </div>-->
      <!--          </el-col>-->
      <!--          <el-col :span="17">-->
      <!--            <el-table :data="tableDesData" border style="height: 200px">-->
      <!--              <el-table-column prop="name" align="center" label="数据集名称" width="150" />-->
      <!--              <el-table-column prop="columnCount" align="center" label="列数" width="100" />-->
      <!--              <el-table-column prop="rowCount" align="center" label="行数" width="100" />-->
      <!--              <el-table-column prop="apply" align="center" label="适用算法" width="100" />-->
      <!--            </el-table>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-tab-pane>-->
      <!--      &lt;!&ndash;tableContentData 是表格里面的数据 tableTitleData是列名以及与tableContentData里面的数据对应渲染的prop&ndash;&gt;-->
      <!--      <el-tab-pane label="数据内容" name="second">-->
      <!--        <div class="app-container">-->
      <!--          &lt;!&ndash;使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。&ndash;&gt;-->
      <!--          <el-table-->
      <!--            v-loading="listLoading"-->
      <!--            border-->
      <!--            fit-->
      <!--            highlight-current-row-->
      <!--            :data="tableData"-->
      <!--            border-->
      <!--            style="width: 100%"-->
      <!--          >-->
      <!--            <el-table-column-->
      <!--              v-for="(item,key) in titleData"-->
      <!--              :key="key"-->
      <!--              align="center"-->
      <!--              :prop="item"-->
      <!--              :label="item"-->
      <!--            />-->
      <!--          </el-table>-->
      <!--          &lt;!&ndash;v-show 属性通过判断total是否大于0来决定是否显示&ndash;&gt;-->
      <!--          <pagination-->
      <!--            v-show="total>0"-->
      <!--            :total="total"-->
      <!--            :page.sync="listQuery.page"-->
      <!--            :limit.sync="listQuery.limit"-->
      <!--            @pagination="getPageContent"-->
      <!--          />-->
      <!--        </div>-->
      <!--      </el-tab-pane>-->

      <!--      <el-tab-pane label="数据结构" name="third">-->
      <div>
        <el-row type="flex" justify="center" align="middle" class="el-row">
          <el-col :span="4">
            <div>
              流水号
            </div>
          </el-col>
          <el-col :span="20">
            <div>
              <el-input
                placeholder="请输入内容"
                v-model="input2">
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--      </el-tab-pane>-->
    </el-tabs>
    <div style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { fetchList } from '@/api/testDemo'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { cloneDeep } from 'lodash'
import axios from 'axios'
export default {
  name: 'ExampleInputForm',
  components: { Pagination },
  props: [
    'dialogVisible'
  ],
  inject: ['root','flowchartId'],
  data() {
    return {
      flowchartNum:null,
      tableData: null,// 数据内容中填充的sklearn中数据的值（动态的从后台请求）
      titleData: null,// 数据内容中的label值（从后台的sklearn库中获取）
      tableDesData: null, // 选择样例数据中数据集简介内容
      tableStructData: null,// 数据结构中存放的名称和类型
      DatasetsName:'',
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        Infotype:'',
        limit: 10
      },
      selectDatasets: '',
      activeName: 'first',
      formModel:{},
      tabIndex: 2,
      input2:""
    }
  },
  created() {
    this.flowchartNum = this.flowchartId
    const { getSelected } = this.root.propsAPI
    const Model = getSelected()[0]
    this.formModel = Object.assign(
      {},
      cloneDeep(Model.getModel())
    )
    this.selectDatasets = Model.getModel().config.selectDatasets
    this.getList() //只是获得最左侧渲染的数据列表
    this.selectChange()
  },
  methods: {
    cancelMethod() {
      this.$emit('close-dialog')
    },
    StoreDataMethod(e) {
      this.$emit('close-dialog')// 告诉父组件要修改管理窗口可视化的变量
      const { getSelected, update } = this.root.propsAPI
      const node = getSelected()[0]
      this.formModel.config.output = this.tableStructData
      console.log('asdfasgew',this.tableStructData)
      this.formModel.config.selectDatasets = this.selectDatasets
      update(node, this.formModel)
    },
    handleClose(done) {
      this.$emit('close-dialog')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 请求需要选择样例数据作业需要的列名
    getList(){
      axios
        .get('/api/algorithmn/getDataList')
        .then((res) => {
          this.DatasetsName = res.data.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 请求前端渲染需要的所有静态数据
    async selectChange() {
      if(this.selectDatasets !== ''){
        try {
          const response = await axios.put(//put 是向服务器发送修改请求
            `/api/algorithmn/getDataContent`,
            {
              flowId: this.flowchartNum,
              nodeId: this.formModel.id,
              nodeName:this.formModel.alname,
              queryList:this.listQuery, // 此处请求的目的只是获得初始化的时候需要的第一页的数据内容
              selectId:this.selectDatasets,
            }
          )
          this.tableDesData = response.data.selectTitle
          this.titleData = response.data.titleData
          this.tableData = response.data.tableData
          this.tableStructData = response.data.tableStructData
          this.total = response.data.total
          this.listLoading = false
        } catch (err) {
          console.log(err)
        }
      }
      else{
        console.log('未选初始数据集')
      }
    },
    // 每次翻页都需要请求新的数据
    async getPageContent(){
      this.listLoading = true
      try {
        const response = await axios.put(//put 是向服务器发送修改请求
          `/api/algorithmn/getPageContent`,
          {
            flowId:this.flowchartNum,
            nodeId: this.formModel.id,
            nodeName:this.formModel.alname,
            queryList:this.listQuery,// 获取翻页的时候需要的数据内容
          }
        ).then(response => {
          this.tableData = response.data.tableData
          this.listLoading = false
        })

      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.el-row {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap
}

</style>
